<template>
  <div class="select-container">
    <!-- 输入框用于显示选中的项目 -->
    <el-input
      v-model="selectedNames"
      readonly
      @focus="toggleSelect(!isSelectVisible)"
      placeholder="请选择">
      <!-- <template #append>
        <el-button icon="el-icon-arrow-down" @click="toggleSelect(!isSelectVisible)"></el-button>
      </template> -->
    </el-input>
    <!-- 弹出的选择器 -->
    <div v-if="isSelectVisible" class="select-popup">
      <el-table
        ref="multipleTable"
        :data="paginatedItems"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="250">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="nickName" label="名称"></el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="text-align: center; margin-top: 10px;"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, defineEmits  } from 'vue';
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { listUser } from '@/api/system/user';

export default {
  components: {
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElPagination
  },
  setup() {
    const items = ref([]); // 所有选项
    const filteredItems = ref([]); // 过滤后的选项
    const selectedIds = ref([]);
    const selectedNames = ref('');
    const isSelectVisible = ref(false);
    const total = ref(0);
    const pageSize = ref(5);
    const currentPage = ref(1);
    const queryParams = ref({
      pageNum: 1,
      pageSize: 10,
      userName: '',
      nickName: '',
      taskId: ''
    });
    const emit = defineEmits(['dataSelectedIdsChild']);

    const searchItems = (query) => {
      listUser(queryParams.value).then(data => {
        if (query) {
          filteredItems.value = data.rows.filter(item => item.nickName.includes(query));
        } else {
          filteredItems.value = data.rows;
        }
        total.value = filteredItems.value.length;
        handlePageChange(currentPage.value);
      });
    };

    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    const toggleSelect = (show) => {
      isSelectVisible.value = show;
      if (show) {
        searchItems('');
      }
    };

    const paginatedItems = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredItems.value.slice(start, end);
    });

    const handleSelectionChange = (selection) => {
      selectedIds.value = selection.map(item => item.userId);
      selectedNames.value = selection.map(item => item.nickName).join(',');
      // emit('dataSelectedIdsChild', selectedIds.value);
    };

    const getSelectedData = () => {
      return selectedIds.value;
    };

    watch(selectedIds, (newValue) => {
      console.log('Selected IDs:', newValue);
    });

    return {
      items,
      selectedIds,
      selectedNames,
      isSelectVisible,
      total,
      pageSize,
      currentPage,
      paginatedItems,
      toggleSelect,
      searchItems,
      handlePageChange,
      handleSelectionChange,
      getSelectedData
    };
  }
};
</script>

<style scoped>
.select-container {
  width: 100% !important;
  position: relative;
}

.select-popup {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: white;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>